<template>
  <div class="login">
      <div class="inner">
         <el-form label-width="80px" :model="loginList" :rules="rules" ref="login">
         <el-form-item label="用户名" prop="username">
          <el-input v-model="loginList.username"  placeholder="请输入用户名" clearable></el-input>
          </el-form-item> 
          <el-form-item label="密 码" prop="password" >
          <el-input v-model="loginList.password" placeholder="请输入密码" type="password" clearable  show-password  @keyup.enter.native="submit"></el-input>
          </el-form-item> 
            <el-form-item>
         <el-button type="primary" @click="submit">立即登录</el-button>
          <!-- <el-button>取消</el-button> -->
          </el-form-item>
         </el-form>
      </div>
  </div>
</template>

<script>
import {loginUser} from "../util/axios"
export default {
  data(){
      return{
          loginList:{
              username:"",
              password:""
          },
          rules:{
            username:[
            { required: true, message: '请输入用户名', trigger: 'blur' },
           { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
            ],
            password:[
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
            ],

          }
      }
  },
  methods:{
      submit(){
          
         this.$refs.login.validate(val=>{
             if(val){    
          
         loginUser(this.loginList).then(res=>{
             if(res.code == 200){
                this.$store.commit("setUserInfo",res.list)
                 this.$router.replace("/");
                 this.$message.success(res.msg);
              }else{
                 this.$message.error(res.msg);
             }
              })
            }
           })
        
      }
  }
}
</script>

<style lang="stylus" scoped>
 .login
    width 100vw
    height 100vh
    background-color rgba(0,0,0,.4)
    position relative
    .inner
        position absolute
        width 600px
        height 300px
        background-color #fff
        border-radius 20px  
        left 50%
        top 50%
        margin-left -300px
        margin-top -150px
        overflow hidden
    .el-form
        width 400px
        // margin 0 auto
        position absolute
        top 50%
        margin-top -70px
        left 50%
        margin-left -215px
        // margin-top 20px

</style>